<template>
  <div class="template_box">
    <!--    查询-->
    <div class="template_search">
      <div class="template_search_box">
        <div class="title">设备型号：</div>
        <a-input disabled v-model:value="device_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">设备型号：</div>
        <a-input disabled v-model:value="device_type_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">数采终端编号：</div>
        <a-input disabled v-model:value="terminal_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <a-button style="margin-right: 10px" type="primary" disabled>查询</a-button>
        <a-button type="primary" disabled>重置</a-button>
      </div>
    </div>
    <!--    列表-->
    <div class="template_table">
      <div class="template_add_btn">
        <a-button style="margin-right: 0.2rem" type="primary" @click="export_data()">导出</a-button>
        <a-button type="primary" @click="re_flash()">刷新</a-button>
      </div>
      <a-table :pagination="false" bordered :dataSource="device_person.data_list" :columns="columns">
        <template #weldStatus="{record}">
          {{ handle_weldStatus(record.weldStatus) }}
        </template>
        <template #operation="{ record }">
          <a-popconfirm
              v-if="device_person.data_list.length && !statusObject.edit_status"
              title="确认编辑此条工件信息，确认是否正在执行中?"
              okText="确认"
              cancelText="取消"
              @confirm="onDelete(record.key)"
          >
            <a>编辑</a>
          </a-popconfirm>
          <a-popconfirm
              v-if="device_person.data_list.length && !statusObject.edit_status"
              title="确认删除此条工件信息，确认是否正在执行中?"
              okText="确认"
              cancelText="取消"
              @confirm="onDelete(record.key)"
          >
            <a :style="{color:'red'}">删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                    :total="pageObject.total"
                    @change="changePage"/>
    </div>
    <add_person_device @re_flash:re_flash="re_flash"/>
  </div>
</template>

<script>
import {defineComponent, ref, reactive} from 'vue';
import {edit_p_class, get_p_class_o} from "@/api/device/device_person"
import {message} from "ant-design-vue";
import {handle_key} from "@/utils/handle_key";
import {cloneDeep} from "lodash-es";
import {useStore} from "vuex";
import add_person_device from "@/views/device/add/add_person_device";
// import {get_partInfo_list} from "@/api/device/lib_part";
import {exportPartInfoReport, get_partInfo_list_new} from "@/api/device/partInfo";
import {delete_partInfo} from "@/api/device/lib_part";


export default defineComponent({
  // name: "WorkpieceInformation";
  name: "work_order_record",
  props: {},
  setup() {
    const store = useStore()
    const dataSource = [];
    const columns = [
      {
        title: '工件名称',
        dataIndex: 'partName',
        key: 'partName',
        slots: {
          customRender: 'partName',
        },
      },
      {
        title: '工件图号',
        dataIndex: 'partImgNo',
        key: 'partImgNo',
      },
      {
        title: '工件编号',
        dataIndex: 'partNo',
        key: 'partNo',
        slots: {
          customRender: 'partNo',
        },
      },
      {
        title: '工件状态',
        dataIndex: 'weldStatus',
        key: 'weldStatus',
        slots: {
          customRender: 'weldStatus',
        },
      },
      {
        title: '负责人',
        dataIndex: 'realName',
        key: 'realName',
        slots: {
          customRender: 'realName',
        }
      },
      {
        title: '设备名称',
        dataIndex: 'equipmentName',
        key: 'equipmentName',
        slots: {
          customRender: 'equipmentName',
        }
      },
      //equipmentName
      {
        title: '操作',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
      },
    ];
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')
    /**
     * 编辑的参数
     *
     * */
    const edit_params = reactive({
      "id": 0,
      "uEquipmentCode": "",
      "equipmentCode": "",
      "cId": 0,
      "userId": 0,
      "createTime": "",
      "updateTime": "",
      "createUserId": 0,
      "updateUserId": 0
    })
    /**
     * status
     *
     * */
    const statusObject = reactive({
      edit_status: false
    })
    /**
     * 编辑
     *
     * */
    const editableData = reactive({});
    const pageObject = reactive({
      currentPage: 1,
      total: 10,
      pageIndex: 1
    });
    /**
     * 请求参数
     * */
    const device_person = reactive({
      params: {
        "pageIndex": pageObject.pageIndex,
        "pageSize": 10,
        "id": 0,
        "searchValue": "",
        "searchBeginTime": "",
        "searchEndTime": "",
        "field": "",
        "order": "",
        "where": ""
      },
      data_list: []
    });
    //获取分页数据
    const changePage = (e) => {
      // console.log(e)
      pageObject.pageIndex = e
    };


    //列表删除确认
    const onDelete = async (key) => {
      const status = device_person.data_list[key].weldStatus
      if (status === 0) {
        let params = {
          "id": device_person.data_list[key].id
        }
        const res = await delete_partInfo(params)
        if (res.code === 1) {
          device_person.data_list = device_person.data_list.filter((item) => {
            return item.key !== key
          })
        }
      } else if (status === 1) {
        message.warning("当前工件已经正在执行中！")
      } else {
        message.warning("当前工件已经完成,无法删除！")
      }
    };
    //获取数据列表
    const get_list = async () => {
      const res = await get_partInfo_list_new(device_person.params)
      if (res.code === 1) {
        device_person.data_list = handle_key(res.data.items)
        pageObject.total = res.totalItems
        return
      }
      message.warning(res.message)
    }

    const edit = key => {
      editableData[key] = cloneDeep(device_person.data_list.filter(item => key === item.key)[0]);
      statusObject.edit_status = true;
    };
    const save = async key => {
      /*
      * 修改之后的参数
      * */
      edit_params.id = device_person.data_list[key].id;
      edit_params.uEquipmentCode = editableData[key].uEquipmentCode;
      edit_params.equipmentCode = editableData[key].equipmentCode;
      edit_params.userId = editableData[key].userId;
      const res = await edit_p_class(edit_params)
      console.log(res)
      if (res.code === 1) {
        delete editableData[key];
        statusObject.edit_status = false
        message.success("修改成功")
        await get_list()
        return
      }
      message.warning(res.message)

    };

    const cancel = key => {
      delete editableData[key];
      statusObject.edit_status = false
    };
    /**
     * 获取用户信息列表
     * */


    const init = () => {
      //获取列表
      get_list();

    }

    /**
     *
     *
     * */
    const handle_user_id = (user_id) => {
      try {
        console.log(store.state.user.user_list)
        const data = store.state.user.user_list.filter((item) => item.userId == user_id);
        return data[0].realName
      } catch (e) {
        console.log("数据解析异常")
        return ""
      }

    }
    /**
     * 刷新
     * */
    const re_flash = () => {
      get_list()
    }

    /**
     * 新增
     * */
    const add_device_func = () => {
      store.commit("SET_ADD_ROLE", true)
    }


    /**
     * 数据初始化
     *
     * */
    init();


    const status_object = {
      0: "待处理",
      1: "正在执行",
      2: "已完成"
    }

    /**
     * 处理工件状态
     * */
    const handle_weldStatus = (status) => {
      return status_object[status]
    }

    /**
     * 导出数据
     *
     * */
    const export_data = async () => {
      const res = await exportPartInfoReport()
    }


    return {
      device_number,
      device_type_number,
      terminal_number,
      dataSource,
      columns,
      pageObject,
      device_person,
      handle_user_id,
      onDelete,
      changePage,
      editableData,
      statusObject,
      edit,
      save,
      cancel,
      store,
      re_flash,
      add_device_func,
      handle_weldStatus,
      export_data
    };
  },
  components: {
    add_person_device
  }
});

</script>

<style scoped lang="scss">
.template_box {
  display: flex;
  flex-direction: column;
  font-size: 0.5rem;

  .template_search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .template_search_box {
      display: flex;
      flex-direction: row;
      width: 25%;
      justify-content: center;

      .title {
        width: 8rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .template_table {
    .template_add_btn {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>
